<template>
  <div class="faq" ref="faq">
    <div class="faq-wrapper">
      <v-header class="faq-header"></v-header>
      <div class="faq-body">
        <h3 class="faq-title">常見問題</h3>
        <div class="tabs">
          <div class="tabs-title">
            <div class="title-item" :class="{'active-item': activeItem === 1}" @click="activeItem = 1"><span>關於CHAOEX</span></div>
            <div class="title-item" :class="{'active-item': activeItem === 2}" @click="activeItem = 2"><span>關於糖果</span></div>
          </div>
          <div class="tabs-pane-container">
            <div class="tabs-pane" v-show="activeItem === 1">
              <el-collapse v-model="ehaoex" accordion>
                <el-collapse-item title="為什麼CHEX項目會有前景？" name="1">
                  <div>CHEX基金會構建的CHEX生態體系中，項目孵化是重中之重，基金會特設投資機構CHEXLAB將在全球範圍內為優質區塊鏈項目提供資金和資源支持，推動項目的應用創新，不斷提升CHEX生態的價值與影響力。</div>
                </el-collapse-item>
                <el-collapse-item title="怎麼關注CHEX的動態？" name="2">
                  <div>我們的動態會發布在CHEX社群和CHAOEX公眾號。</div>
                </el-collapse-item>
                <el-collapse-item title="有問題怎麼聯繫客服？" name="3">
                  <div>有問題可以發送到CHEX社群裡，我們會逐一回覆。</div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div class="tabs-pane" v-show="activeItem === 2">
              <el-collapse v-model="candy" accordion>
                <el-collapse-item title="為什麼有時候我領不到糖果？" name="1">
                  <div>直接登錄網站是沒有糖果的，需要通過我們分發的糖果鏈接，才能領取糖果。</div>
                </el-collapse-item>
                <el-collapse-item title="我的CHEX幣都去哪兒了？" name="2">
                  <div>CHEX幣儲存在您的註冊賬戶裡。我們會在每期活動發放時間統一發放CHEX幣到您的CHAOEX平台賬戶內，請關注公眾號和社群通知。</div>
                </el-collapse-item>
                <el-collapse-item title="我怎麼得到更多的CHEX幣呢？" name="3">
                  <div>邀請其他小夥伴參與可以得到豐厚的CHEX獎勵。<br>
                      1.邀請機制升級：活動期間內每邀請一人，獎勵邀請人6個幣，被邀請人4個幣。被邀請人在活動週期內完成一次充幣且金額大於500（折合人民幣500元），再贈送10個幣。<br>
                      2.活動期間被邀請人完成一次交易（買幣/賣幣），且折合人民幣金額大於500元，給予被邀請人獎勵10個幣。<br>
                      3.活動期間所有獎勵發放時間為每七天發放一次。</div>
                </el-collapse-item>
                <el-collapse-item title="活動持續多久？" name="4">
                  <div>活動時間：2018年6月5日14:00——2018年7月5日14:00。</div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
export default {
  name: 'FAQ',
  data () {
    return {
      ehaoex: '1',
      activeItem: 1,
      candy: '1'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  methods: {
    _initScroll () {
      this.faqScroll = new this.$BScroll(this.$refs.faq, {
        click: true
      })
    }
  },
  components: {
    vHeader: Header
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-collapse-item__header, .el-collapse-item__wrap{
  background: rgba(245,245,245,1);
}
.el-collapse-item__arrow{
  float: left;
}
.el-collapse-item__header{
  padding: 24px;
  font-size:28px;
  font-weight: bold;
  color:rgba(102,102,102,1);
}
.el-collapse-item__content{
  padding: 0 24px 24px 50px;
  font-size: 28px;
  color:rgba(102,102,102,1);
  line-height: 36px;
}
</style>
<style scoped lang="stylus" rel="stylesheet/stylus">
.faq-wrapper{
  padding: 37px 30px 0;
}
.faq-header{
  margin-bottom: 52px;
}
.faq-body{
  box-sizing: border-box;
  padding: 56px 44px 109px;
  background: rgba(255,255,255,1);
  border-radius: 9px;
  .faq-title{
    margin-bottom: 50px;
    font-size: 38px;
    color: rgba(234,185,0,1);
    font-weight: bold;
    line-height: 38px;
    text-align: center;
  }
  .tabs-title{
    display: flex;
    .title-item{
      flex: 1;
      padding-bottom: 6px;
      margin-bottom: 40px;
      font-size: 26px;
      color: rgba(29,64,180,1);
      line-height: 26px;
      text-align: center;
      span{
        font-weight: 600;
      }
      &.active-item{
        span{
          border-bottom: 4px solid rgba(29,64,180,1);
        }
      }
    }
  }
}
</style>
